<template>
	<view class="content"  ref="content" id="content">
		   <u-swiper
		            :list="imageList"
		            indicator
		            indicatorMode="line"
		            circular
					height="600"
					imgMode="aspectFit"
		    class="u-swiper"></u-swiper>
			<view class="footer">
				<u-button class="custom-style" @click="upImage()">上传
				</u-button>
			</view>
	</view>
</template>

<script>
	import {httpGet,httpPost} from "@/common/request/http.js"//上传图片以及后续读取封装
	import {saveAlbumSetting} from "@/common/userSetting/saveImage.js"//保存图片
	import {saveImageToPhotosAlbum} from "@/common/utils/saveImage.js"//保存图片
	import { pathToBase64, base64ToPath } from '@/node_modules/image-tools/index.js'
	export default {
		data() {
			return {
				imageList:[],
				WH:[]
			}
		},
		onLoad() {
			this.imageList=this.$storage.get("imageUrl")	
			this.WH=this.$utils.getSystemInfo()
			this.$nextTick(() => {
				// this.$refs.content.style.width=(this.WH.w)*2+'rpx'
				// this.$refs.content.style.height=(this.WH.h)*2+'rpx'
			})
		},
		methods: {
			upImage(){
				this.initStorage()
				// 上传到后台保存
				pathToBase64(this.imageList[0]).then(baseRes=>{
					let bse64= baseRes.slice(23,-1)
					this.$storage.set("imageBase64",baseRes)	
					//到后台调用动物识别API接口
					let phone=JSON.parse(this.$storage.get("user")).phone
					let photoName =phone+"-"+this.$utils.thisTime()
					let requestBody = {
						base64:bse64,
						userPhone:phone
					}
					let post=httpPost('photo/upImage/'+photoName+'.jpg',requestBody).then(value=>{
						let result = JSON.parse(value.data.data)
						this.$storage.set('photoDistinguish',result.result)
						this.$utils.redirectTo('ModelPage/showPhotoDistinguish','')
					}).catch(error=>{
						console.log(error)
						this.$utils.errorMsg(error.data.msg)
					})
					
				})
				
			},
			initStorage(){
				this.$storage.remove("imageBase64")
				this.$storage.remove("photoDistinguish")
			}
		}
	}
</script>

<style scoped lang="scss">
page{
	height: 100%;
	width: 100%;
	background-image: none;
}
.footer{
	position: fixed;
	transform: translateX(-50%);
	left: 50%;
	bottom: 5%;
}
.custom-style {
	@include modules-btn;
	margin:20rpx 0 ;
	box-shadow: 0 0 5px #919191;
	width: 600rpx; 
}
</style>